<template>
	<view v-if="show">
		<u-popup :show="show" mode="center" @close="close" round="20" :closeable="true">
			<view class="exchange px-32 py-44">
				<view class="text-40 font-700 text-center">
					{{form.storeName}}
				</view>
				<view class="mt-32 text-32 font-700">
					支付金额
				</view>
				<view class="mt-24 flex items-center">
					<!-- <image
						:src="`https://file.fulewanjia.com/fulewanjia/profile/appImages2/${form.divideType == 1 ? 'img_sheng@3x' : 'img_zhuan@3x'}.png`"
						class="image-56 mr-20" mode="" v-if="payModeList.length > 0"></image> -->
					<u--input placeholder="请输入支付金额" border="surround" v-model="form.price" type="digit"
						@change="moneyChange"></u--input>
				</view>
				<!-- <div class="" v-if="payModeList.length > 0">
					<u-divider></u-divider>
					<view class="text-36 font-700">
						支付模式
					</view>
					<view class="mt-16">
						<u-radio-group v-model="form.divideType" placement="column">
							<u-radio v-for="(item,index) in payModeList" :key="index" activeColor="#FF8400"
								:label="item.label" :name="item.name"></u-radio>
						</u-radio-group>
					</view>
				</div> -->
				<u-divider></u-divider>
				<view class="text-36 font-700">
					支付方式
				</view>
				<view class="mt-16">
					<u-radio-group v-model="form.payWay" placement="column">
						<u-radio v-for="(item,index) in payWayList" :key="index" activeColor="#FF8400"
							:label="item.label" :name="item.payWay"></u-radio>
					</u-radio-group>
				</view>

				<view class="exchangeConfirm text-center text-FFF text-32 round-12" style="background-color: #FF0F0F;"
					@click="exchangeConfirm">
					支付
				</view>
			</view>
		</u-popup>

		<u-popup :show="passwordShow" @close="passwordShow=false" mode="center" :round="20">
			<view class="p-48">
				<view class="pay_title">
					<text>请输入支付密码</text>
				</view>
				<view class="flex justify-around mt-28">
					<u-code-input v-model="password" :maxlength="6" dot :focus="true"></u-code-input>
				</view>
				<view class="mt-32 text-FFF round-12 text-center py-20" style="background-color: #E2382B;"
					@click="passwordConfirm">
					确认
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		throttle
	} from 'throttle-debounce';
	var thro;
	export default {
		name: "Exchange",
		data() {
			return {
				payModeList: [],
				payModeObj: null,
				passwordShow: false,
				password: "",

				payWayList: [
					// #ifdef MP-WEIXIN
					{
						label: "微信",
						payWay: 0,
					},
					{
						label: "余额",
						payWay: 5,
					},
					// #endif
				]
			};
		},
		props: {
			show: {
				default: false,
				require: true,
				type: Boolean
			},
			form: {
				require: true,
			},
		},
		watch: {
			form: {
				handler(newVal) {
					if (newVal.openBalancePay != 1) {
						// #ifdef APP
						this.payWayList = [{
								label: "微信",
								payWay: 1,
							},
							{
								label: "支付宝",
								payWay: 2,
							},
						]
						// #endif
					} else {
						// #ifdef APP
						this.payWayList = [{
								label: "微信",
								payWay: 1,
							},
							{
								label: "支付宝",
								payWay: 2,
							},
							{
								label: "余额",
								payWay: 5,
							},
						]
						// #endif
					}
					console.log(newVal, this.show, this.payWayList)
				},
				deep: true
			}
		},
		mounted() {
			thro = this
		},
		methods: {
			passwordConfirm: throttle(2000, async () => {
				if (!thro.password || thro.password.length != 6) {
					thro.$modal.msg('请输入支付密码!')
					return
				}

				thro.form.payPassword = thro.password
				thro.passwordShow = false
				thro.$Api.store.offlineOrderPay(thro.form).then(pay => {
					thro.$modal.msg('支付成功!')
					if (thro.form.divideType == 2) {
						thro.close(thro.payModeObj.zhuanJinjifen)
					} else {
						thro.close()
					}
				})
			},{
				noTrailing:true
			}),
			async moneyChange(e) {
				if (e) {
					const res = await this.$Api.index.getPayAmount({
						price: e,
						rate: this.form.rate
					})
					this.payModeObj = res
					// this.handlePayModeList()
				}
			},
			handlePayModeList() {
				this.payModeList = [{
						label: `省(支付:${this.payModeObj.shengTotalPrice}现金+${this.payModeObj.shengXiaofeijinPrice}消费金)`,
						name: 1
					},
					{
						label: `赚(支付:${this.payModeObj.zhuangTotalPrice}现金,得:${this.payModeObj.zhuanJinjifen}金积分)`,
						name: 2
					}
				]
				return
				// 现金
				if (this.form.payWay == 2 || this.form.payWay == 0) {

					// 现金+余额
				} else if (this.form.payWay == 3 || this.form.payWay == 4) {
					this.payModeList = [{
							label: `省(支付:${this.payModeObj.shengCashPrice}现金+${this.payModeObj.shengBalancePrice}余额+${this.payModeObj.shengXiaofeijinPrice}消费金)`,
							name: 1
						},
						{
							label: `赚(支付:${this.payModeObj.zhuanCashPrice}现金+${this.payModeObj.zhuanBalancePrice}余额,得:${this.payModeObj.zhuanJinjifen}金积分)`,
							name: 2
						}
					]
				}
			},
			close(jinjifen) {
				this.$emit('close', jinjifen)
			},
			exchangeConfirm: throttle(2000, () => {
				if (!thro.form.price) {
					thro.$modal.msg(`请输入金额!`)
					return
				}

				if (thro.form.payWay == 5) {
					thro.password = ""
					thro.passwordShow = true
					return
				}

				thro.$Api.store.offlineOrderPay(thro.form).then(pay => {
					if (thro.form.payWay == 1 || thro.form.payWay == 0) {
						thro.$pay.WeChatPay(pay).then(() => {
							thro.$modal.msg('支付成功!')
							if (thro.form.divideType == 2) {
								thro.close(thro.payModeObj.zhuanJinjifen)
							} else {
								thro.close()
							}
						}).catch(err => {
							thro.$modal.msg('支付失败!')
							thro.close()
						})
					} else if (thro.form.payWay == 2) {
						thro.$pay.Alipay(pay.data).then(() => {
							thro.$modal.msg('支付成功!')
							if (thro.form.divideType == 2) {
								thro.close(thro.payModeObj.zhuanJinjifen)
							} else {
								thro.close()
							}
						}).catch(err => {
							thro.$modal.msg('支付失败!')
							thro.close()
						})
					} else if (thro.form.payWay == 5) {
						if (thro.form.divideType == 2) {
							thro.close(thro.payModeObj.zhuanJinjifen)
						} else {
							thro.close()
						}
					}
				})
			},{
				noTrailing:true
			})
		}
	}
</script>

<style lang="scss" scoped>
	.exchange {
		width: 600rpx;
	}

	.exchangeConfirm {
		width: 400rpx;
		height: 88rpx;
		line-height: 88rpx;
		margin: 48rpx auto 0;
	}

	/deep/ .u-radio {
		margin-top: 20rpx !important;
	}

	/deep/ .u-radio__text {
		font-size: 32rpx !important;
		font-weight: 700 !important;
		color: #000 !important;
	}
</style>